---
layout: default
title: "Belajar Jekyll & Markdown dengan Mudah"
description: "Blog tutorial Jekyll, Markdown, dan GitHub Pages dalam bahasa Indonesia. Artikel singkat, jelas, dan siap dipraktikkan."
permalink: /
---
{% comment %} Landing page. CSS dan JS khusus dimuat lewat link dan script di bawah ini. {% endcomment %}
<link rel="stylesheet" href="{{ '/assets/css/landing.css' | relative_url }}">

<div class="landing-page">

  {% comment %} ===== HERO ===== {% endcomment %}
  <section class="landing-hero" aria-labelledby="landing-hero-title">
    <div class="landing-container landing-hero-grid">
      <div class="landing-hero-content">
        <span class="landing-badge">✨ Blog Terpercaya</span>
        <h1 class="landing-title" id="landing-hero-title">
          <span class="landing-title-accent">Belajar Jekyll &amp; Markdown</span> dengan Mudah
        </h1>
        <p class="landing-subtitle">
          Tutorial praktis seputar Jekyll, Markdown, dan GitHub Pages dalam bahasa Indonesia.
          Setiap artikel ditulis ringkas dan langsung bisa dipraktikkan, dari pemasangan pertama sampai situs Anda tayang.
        </p>
        <div class="landing-actions">
          <a class="landing-btn landing-btn-primary" href="{{ '/blog/' | relative_url }}">Baca Blog</a>
          <a class="landing-btn landing-btn-outline" href="{{ '/about/' | relative_url }}">Tentang Kami</a>
        </div>
        <ul class="landing-stats">
          <li class="landing-stat">
            <strong class="landing-stat-value" data-landing-count="{{ site.posts.size }}" data-landing-suffix="+">{{ site.posts.size }}+</strong>
            <span class="landing-stat-label">Artikel</span>
          </li>
          <li class="landing-stat">
            <strong class="landing-stat-value" data-landing-count="{{ site.categories.size }}">{{ site.categories.size }}</strong>
            <span class="landing-stat-label">Kategori</span>
          </li>
          <li class="landing-stat">
            <strong class="landing-stat-value" data-landing-count="10" data-landing-suffix="rb+">10rb+</strong>
            <span class="landing-stat-label">Pembaca</span>
          </li>
        </ul>
      </div>
      <div class="landing-hero-media">
        <img class="landing-hero-img" src="https://picsum.photos/seed/blog/800/800" width="800" height="800" alt="Ilustrasi blog tutorial Jekyll" fetchpriority="high">
      </div>
    </div>
  </section>

  {% comment %} ===== FEATURES ===== {% endcomment %}
  <section class="landing-section landing-section-alt" aria-labelledby="landing-features-title">
    <div class="landing-container">
      <div class="landing-section-head">
        <h2 class="landing-section-title" id="landing-features-title">Kenapa Pilih Blog Ini?</h2>
        <p class="landing-section-desc">Dibuat untuk Anda yang ingin belajar tanpa dipusingkan istilah rumit.</p>
      </div>
      <div class="landing-features">
        <article class="landing-feature" data-landing-reveal>
          <span class="landing-feature-icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg>
          </span>
          <h3 class="landing-feature-title">Cepat</h3>
          <p class="landing-feature-text">Situs statis yang dimuat kilat, nyaman dibaca di ponsel maupun komputer.</p>
        </article>
        <article class="landing-feature" data-landing-reveal>
          <span class="landing-feature-icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="m9 12 2 2 4-4"/></svg>
          </span>
          <h3 class="landing-feature-title">Terpercaya</h3>
          <p class="landing-feature-text">Setiap langkah sudah dicoba langsung sebelum ditulis menjadi artikel.</p>
        </article>
        <article class="landing-feature" data-landing-reveal>
          <span class="landing-feature-icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
          </span>
          <h3 class="landing-feature-title">Lengkap</h3>
          <p class="landing-feature-text">Dari dasar Markdown hingga deploy ke GitHub Pages, semua ada di satu tempat.</p>
        </article>
        <article class="landing-feature" data-landing-reveal>
          <span class="landing-feature-icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="8" width="18" height="4" rx="1"/><path d="M12 8v13"/><path d="M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7"/><path d="M7.5 8a2.5 2.5 0 0 1 0-5C11 3 12 8 12 8s1-5 4.5-5a2.5 2.5 0 0 1 0 5"/></svg>
          </span>
          <h3 class="landing-feature-title">Gratis</h3>
          <p class="landing-feature-text">Semua artikel terbuka untuk dibaca tanpa biaya dan tanpa perlu mendaftar.</p>
        </article>
      </div>
    </div>
  </section>

  {% comment %} ===== ARTIKEL TERBARU ===== {% endcomment %}
  <section class="landing-section" aria-labelledby="landing-latest-title">
    <div class="landing-container">
      <div class="landing-section-head">
        <h2 class="landing-section-title" id="landing-latest-title">Artikel Terbaru</h2>
        <p class="landing-section-desc">Tulisan paling baru yang bisa langsung Anda baca.</p>
      </div>

      {% if site.posts.size > 0 %}
      <div class="landing-posts">
        {% for post in site.posts limit: 3 %}
          {% assign seed = post.title | slugify %}
          {% assign img = post.image.path | default: post.image %}
          {% if img and img != '' %}
            {% if img contains '://' %}
              {% assign img_src = img %}
            {% else %}
              {% assign img_src = img | relative_url %}
            {% endif %}
          {% else %}
            {% capture img_src %}https://picsum.photos/seed/{{ seed }}/800/500{% endcapture %}
          {% endif %}
          {% assign cat = post.categories | first %}
          <article class="landing-post-card" data-landing-reveal>
            <a class="landing-post-thumb" href="{{ post.url | relative_url }}" tabindex="-1" aria-hidden="true">
              <img src="{{ img_src }}" width="800" height="500" loading="lazy" alt="">
            </a>
            <div class="landing-post-body">
              {% if cat %}<span class="landing-cat">{{ cat }}</span>{% endif %}
              <h3 class="landing-post-title"><a href="{{ post.url | relative_url }}">{{ post.title }}</a></h3>
              <p class="landing-post-desc">{{ post.description | default: post.excerpt | strip_html | strip_newlines | truncatewords: 22 }}</p>
            </div>
          </article>
        {% endfor %}
      </div>
      {% else %}
      <div class="landing-empty">
        <h3 class="landing-empty-title">Belum Ada Artikel</h3>
        <p class="landing-empty-text">Artikel pertama sedang disiapkan. Silakan kembali lagi nanti.</p>
      </div>
      {% endif %}

      <div class="landing-more">
        <a class="landing-btn landing-btn-primary" href="{{ '/blog/' | relative_url }}">Lihat Semua Artikel</a>
      </div>
    </div>
  </section>

  {% comment %} ===== CTA ===== {% endcomment %}
  <section class="landing-section landing-section-cta" aria-labelledby="landing-cta-title">
    <div class="landing-container">
      <div class="landing-cta" data-landing-reveal>
        <h2 class="landing-cta-title" id="landing-cta-title">Siap Mulai Membaca?</h2>
        <p class="landing-cta-text">Pilih artikel yang Anda butuhkan, atau kirim pertanyaan lewat halaman kontak. Kami senang membantu.</p>
        <div class="landing-actions landing-actions-center">
          <a class="landing-btn landing-btn-accent" href="{{ '/blog/' | relative_url }}">Mulai Baca</a>
          <a class="landing-btn landing-btn-ghost" href="{{ '/contact/' | relative_url }}">Hubungi Kami</a>
        </div>
      </div>
    </div>
  </section>

</div>

<script src="{{ '/assets/js/landing.js' | relative_url }}" defer></script>